<template>
  <div class="init">
    <div class="getContent overflow">
      <div class="DetailsAnnouncement_l">
        <p class="aaa">此组内其他文章</p>

        <ul>
          <router-link
            v-for="(item,index) in leftMsg"
            :key="index"
            tag="li"
            :to="'/getContent?id='+item.id+'&catId='+item.helpCatId"
          >
            <p>
              <span></span>
              {{item.title}}
            </p>
          </router-link>
          <!-- <li v-for="(item, index) in oticeListMsg">
          <p>{{item.title}}</p>
          <span></span>
          </li>-->
        </ul>
      </div>
      <div class="DetailsAnnouncement_r">
        <p class="notice">
          <!-- 帮助中心>{{  }} -->
        </p>
        <p class="title">{{msg.title}}</p>
        <div style="display: flex;padding-left: 50px;margin-top: 25px;">
          <img src="../assets/images/bbjy/message.png" alt />
          <!-- <p>房产网</p> -->
          <p>更新于{{msg.createTime}}</p>
        </div>
        <div class="content Only" v-html="size"></div>
        <!-- <p class="content" >{{}}</p> -->
      </div>
    </div>
  </div>
</template>
<script>
// import { getContentById, searchHelpContent } from "../api/api";
export default {
  data() {
    return {
      oticeListMsg: [],
      leftMsg: [],
      content: "",
      title: "",
      time: "",
      shuiji: "",
      msg: {},
      size:""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // console.log(this.$route.query.id)
      let data = "id=" + this.$route.query.id;
      getContentById(data).then(res => {
        this.msg = res.data.data;
        // this.oticeListMsg = res.data.data;
        // for (let i = 0; i < this.oticeListMsg.length; i++) {
        //   if (this.$route.query.id == this.oticeListMsg[i].messageId) {
        //     this.content = this.oticeListMsg[i].content;
        //     this.title = this.oticeListMsg[i].title;
        //     this.time = this.oticeListMsg[i].createTime;
        //   }
        // }
        this.size = this.msg.contentDesc.replace(/<img src=/g, "<img style='width:100%;' src=")
        
        console.log(res);
      });

      //   左边更多列表
      let leftData = "helpCatId=" + this.$route.query.catId;
      searchHelpContent(leftData).then(res => {
        this.leftMsg = res.data.data.filter(
          item => item.id !== this.$route.query.id
        );
      });
    }
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped>
.init {
  width: 100%;
  background: #fff;
  .getContent {
    min-height: 90vh;
    margin: 80px auto;
    width: 1200px;
    .title {
      line-height: 100px;
      font-weight: 700;
      font-size: 20px;
      padding-left: 50px;
    }
    > div p {
      padding-left: 50px;
      line-height: 26px;
    }
    .DetailsAnnouncement_l {
      width: 20%;
      // background: pink;
      float: left;

      p {
        padding: 10px;
        color: #8c979d;
        position: relative;
        span {
          display: block;
          position: absolute;
          right: -4px;
          top: 16px;
          background: #6881ff;
          height: 8px;
          width: 8px;
          z-index: 99;
          border-radius: 50%;
        }
      }
      p:hover {
        color: #6881ff;
        span {
          background: #999;
        }
      }

      > p {
        font-weight: 700;
        font-size: 18px;
        color: #000;
      }
      ul li {
        p {
          border-right: 1px #f2f2f2 dashed;
        }
      }
      .aaa:hover {
        color: #000;
      }
    }
    .DetailsAnnouncement_r {
      width: 80%;
      // background: skyblue;
      float: left;
      padding: 25px;

      .notice {
        //   color: #f7f7fb;
      }
      .title {
        line-height: 50px;
        font-weight: 700;
      }
      .content {
        padding: 50px;
        color: #8c979d;
      }
    }
  }
}
</style>